import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
import { HttpRequest } from "../../../service/httpRequest";

declare var $:any;


@Component({
  selector: 'chart-faulttype',
  template: `
  <div id="faulttype" style="height:400px;width: 1200px; margin: 0 auto"></div>
  `
})
export class FaultTypeComponent implements OnInit, OnChanges{
  @Input() public deviceId:string;
  @Input() public date:any;
  option;

  constructor(private httpRequest:HttpRequest) { }

  ngOnInit() {
    this.paint();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if(changes.date.currentValue == undefined) return;
    this.getData(changes.date.currentValue.type);
  }

  getData(type){
    switch(type){
      case 'month':
        this.faulttype([
          ['故障类型次数',50],
          ['总故障类型次数',80]
        ]);
        break;
      case 'day':
        this.faulttype([
          ['故障类型次数',20],
          ['总故障类型次数',20]
        ]);
        break;
      case 'hour':
        this.faulttype([
          ['故障类型次数',10],
          ['总故障类型次数',20]
        ]);
        break;
    }

  }

  paint(){

    let date = new Date();
    let ofday = date.getDate();
    let ofmonth = date.getMonth()+1;
    let ofyear = date.getFullYear();
    let time = ofyear + '-' + ofmonth  + '-' + ofday;
    var data = [
      ['故障类型次数',32],
      ['总故障类型次数',68]
    ];

    this.faulttype(data);


  }


  faulttype(data){
    $('#faulttype').highcharts({
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
          beta: 0
        }
      },
      title: {
        text: '设备故障类型次数'
      },
      subtitle: {
        text: '设备故障类型次数的统计：提供两种方式：日、月'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 35,
          dataLabels: {
            enabled: true,
            format: '{point.name}'
          }
        }
      },
      series: [{
        type: 'pie',
        name: '占比',
        data: data
      }]
    });
  }

}
